<template>
	<view :style="theme">
		<view class="nav" :style="{backgroundImage:'url('+ossHost+'/public/model/bg_daka.png)'}">
			<view class="card">
				<view class="flex-ca">
					<view class="card_box">
						<view>连续打卡</view>
						<view><text>{{info.integralDayContinue || 0}}</text>天</view>
					</view>
					<view class="card_box">
						<view>累计打卡</view>
						<view><text>{{info.integralDaySum|| 0}}</text>天</view>
					</view>
					<view class="card_box">
						<view>打卡积分</view>
						<view><text>{{info.integralSign|| 0}}</text>分</view>
					</view>
				</view>
				<view v-if="!isTrue" class="dkBtn" @click="daka">立即打卡</view>
				<view v-else class="dkBtn no">已打卡</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				info: {},
				isTrue: false,
			}
		},
		onShow() {
			this.getDetail()
		},
		methods: {
			jump(url, params, a) {
				this.$app.jump(url, params, a);
			},
			jump2(url, params, a) {
				this.$app.jump2(url, params, a);
			},
			daka() {
				let that = this
				this.$app.ajax({
					api: this.$api.clockIn(),
					data: {
						param: {
							memberId: this.userInfo.id
						}
					}
				}).then((res) => {
					if (res.errorCode === '000000') {
						uni.showToast({
							title: '打卡成功',
							icon: 'success',
							duration: 2000,
							mask: true,
							success(res) {
								that.getDetail()
							}
						})
					}
				}).catch(() => {})
			},
			getDetail() {
				this.$app.ajax({
					api: this.$api.isClockIn(),
					data: {
						param: {
							memberId: this.userInfo.id
						}
					}
				}).then((res) => {
					if (res.errorCode === '000000') {
						this.isTrue = res.record.isTrue
						this.info = res.record
					}
				}).catch(() => {})
			}

		}

	}
</script>
<style scoped lang="scss">
	.nav {
		width: 750rpx;
		height: 100vh;
		z-index: 9;
		position: relative;
		background-color: #ffffff;
		background-color: rgb(155, 210, 253);
		background-position: center -250rpx;
		background-repeat: no-repeat;
		background-size: 100% auto;
	}

	.nav_bj {
		position: absolute;
		left: 0;
		top: 0;
		width: 750rpx;
		height: 100%;
	}


	.nav view {
		z-index: 10;
	}

	.card {
		width: 100%;
		position: absolute;
		left: 0;
		bottom: 0;
		z-index: 10;
		margin: 0 auto;
		background: #FFFFFF;
		box-shadow: 0rpx 2rpx 20rpx 0rpx rgba(0, 0, 0, 0.08);
		border-radius: 20rpx 20rpx 0 0;
		box-sizing: border-box;
		padding: 40rpx 0;
	}

	.card_box {
		color: #666666;
		font-size: 24rpx;
		line-height: 1;
	}

	.card_box view:nth-of-type(2) {
		color: #999999;
		margin-top: 10rpx;
		font-size: 24rpx;
		line-height: 50rpx;
	}

	.card_box view text {
		font-weight: 600;
		vertical-align: top;
		margin-right: 10rpx;
		color: #111111;
		font-size: 40rpx;
	}

	.dkBtn {
		width: 670rpx;
		height: 98rpx;
		line-height: 98rpx;
		background: linear-gradient(180deg, #4F76D4 0%, #4167C1 100%);
		box-shadow: 0px 8rpx 16rpx 0px rgba(65, 103, 193, 0.17);
		border-radius: 50rpx;
		margin: 30rpx auto 0;
		font-size: 32rpx;
		font-weight: bolder;
		color: #fff;
		text-align: center;
	}

	.dkBtn.no {
		background: linear-gradient(180deg, rgba(79, 118, 212, 0.5), rgba(65, 103, 193, 0.5));
		font-weight: 400;
	}
</style>
